<!DOCTYPE html>
<html>
<stl:include file="/include/head.html"></stl:include>
<link rel="stylesheet" type="text/css" href="{Stl.SiteUrl}/css/events-month.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/locales/zh-cn.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.2/css/layui.min.css" rel="stylesheet">
<!-- 通过第三方CDN方式引入 layui.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.2/layui.min.js"></script>

<body>

  <!-- 首页总容器 -->
  <div class="containers">
    <!-- 头部导航区域 -->

    <stl:include file="/include/header.html"></stl:include>

    <div class="content w">

      <div class="search">
        <div class="search_left">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
            viewBox="0 0 16 16">
            <path
              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
          </svg>
          <input placeholder="搜索活动" class="search_input" id="search_input" />
        </div>
        <div class="search_right">
          <button class="search_btn" id="search_btn">搜索&nbsp;&nbsp;&nbsp;活动</button>
          <div class="action">
            <div class="action_lst" id="GoList">列表</div>
            <div class="action_lst">月</div>
            <div class="action_lst" id="goday">日</div>

          </div>
        </div>
      </div>
      <div class="caozuo">
      </div>
      <!-- 列表展示 -->

      <div class="event_list w">
        <div class="date_title">
          <span>周一</span>
          <span>周二</span>
          <span>周三</span>
          <span>周四</span>
          <span>周五</span>
          <span>周六</span>
          <span>周天</span>
        </div>
        <!-- <div class="dropdown drr">
						<button class="selectDate" type="button" data-toggle="dropdown" aria-expanded="false">
                        <svg class="dropdown-toggle" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                            fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                        </svg>
                    </button>
						<div class="dropdown-menu dropdown-menu_cdfs"
							style="width:276px !important ;height:307px !important">
							<div class="layui-inline" id="ID-laydate-static-1"></div>
						</div>
					</div> -->
        <div id='calendar'></div>

      </div>
    </div>

    <script>
      // 站点接口api密钥
      var key = '5d47fae4-dff5-41a6-96e1-35cc98f1b5f4'
      // 基础路径
      var baseURL = `http://test.oneupus.com`


      document.addEventListener('DOMContentLoaded', function () {
        var linkElements = document.querySelectorAll('.nav-link.dropdown-toggle');
        linkElements.forEach(function (linkElement) {
          if (linkElement.textContent.trim() === '诚邀合伙人' || linkElement.textContent.trim() === '联系我们') {
            linkElement.classList.remove('dropdown-toggle');
          }
        });
      });
      layui.use(['element'], function () {
        var laydate = layui.laydate;
        // 直接嵌套显示
        laydate.render({
          elem: '#ID-laydate-static-1',
          position: 'static',
          done: function (value, date, endDate) { // value：选中日期的日期格式；date：日期对象
            console.log(value); // 输出选中的日期值，如 "2023-04-01"
            console.log(date); // 输出日期对象，可以访问 year、month、date 等属性

          }
        });

        var dataList = []
        GetActiveList(44, 54, page, perPage, '')
        // 获取导航元素(处理导航逻辑)
        var nav = document.querySelector(".navbar-nav");

        // 为每个下拉菜单添加鼠标悬停事件监听器
        nav.querySelectorAll(".nav-item.dropdown").forEach(item => {
          item.addEventListener("mouseover", function () {
            // 展开下拉菜单
            this.querySelector(".dropdown-menu").classList.add("show");
          });

          item.addEventListener("mouseout", function () {
            // 收起下拉菜单
            this.querySelector(".dropdown-menu").classList.remove("show");
          });
        });



        var page = 1;
        var perPage = 10;
        // 
        // 通过api方式获取活动内容
        function GetActiveList(siteIdvalue, channelIdvalue, pagevalue, perPagevalue, searchValue) {
          let params = {
            siteId: siteIdvalue,//站点id
            channelId: channelIdvalue,//栏目id
            page: pagevalue,//页数
            perPage: perPagevalue,//条数
          }
          if (searchValue) {
            // 加查询条件
            params.wheres = [
              {
                column: 'Title',
                operator: 'Like',
                value: `%${searchValue}%`
              }
            ]
          }

          fetch(`${baseURL}/api/v1/contents`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-SS-API-KEY': key
            },
            body: JSON.stringify(params)
          })
            .then(response => response.json())
            .then(data => {
              if (data.totalCount > 0) {
                let lingshidata = []
                data.contents.forEach(items => {
                  console.log(items, 'itemsitemsitems')
                  lingshidata.push({
                    title: items.summary,
                    start: items.startTimes, // 修改为4月1日的开始时间
                    end: items.endTimes, // 结束时间同为4月1日的结束时间
                    allDay: true, // 设为全天事件，如果只需要标记日期，不需要具体时间跨度
                    location: '无',
                    description: items.subTitle,
                    imageUrl: items.imageUrl

                    // id:items.id

                  })
                })
                dataList = lingshidata
                SetDataList()
                console.log(dataList, 'dataList')

              }
            })
            .catch(error => console.error('Error:', error));
        }





        // 获取当前的年月
        let T = new Date()
        // console.log(T, 'ttttt');
        // 获取当前年份
        var year = T.getFullYear()
        // 获取当前月份
        let month = T.getMonth() + 1
        $('#year').html(year)
        $('.showDates').html(year)
        $('#month').html(month)
        document.addEventListener('DOMContentLoaded', function () {

          $('.year_listsdf').each(function (index, element) {

            // console.log(index, '索引值');
            if (year == TD[index]) {
              $(this).addClass('current_year'); // 默认选中当前年份
              $(this).addClass('selectedyear'); // 默认选中当前年份

            }
            // "this" 指向当前遍历到的元素
            $(this).on('click', function (event) {
              if (event.target.innerText) {
                const selectedYear = parseInt(event.target.innerText);
                $('.showDates').html(event.target.innerText)
                const currentDate = calendar.getDate();
                const targetDate = new Date(selectedYear, currentDate.getMonth(), currentDate.getDate());
                calendar.gotoDate(targetDate);
              }
              // 在这里编写处理点击事件的代码
              $('.year_listsdf').removeClass('selectedyear'); // 移除之前所有已选中的元素的 'selected' 类
              $(this).addClass('selectedyear'); // 给当前点击的元素添加 'selected' 类
            });
          });

        });


        // 当数据发生变化时重新渲染日历
        function SetDataList(timsValue) {
          setTimeout(() => {
            const yearSelector = document.querySelector('.year_list');
            const currentYear = new Date().getFullYear();
            let yearsstr = ''; // 用于存储年份选项的数组
            var TD = []
            // 生成年份选项[2019-2030]
            for (let i = 2019; i <= 2030; i++) {
              TD.push(i);
              const option = document.createElement('option');
              option.value = i;
              option.textContent = i;
              yearsstr += `<div class="year_listsdf">${i}</div>`
            }
            console.log(yearsstr, 'yearsstr');
            $('.menu_cdfs_fg_but').html(yearsstr)

            const calendarEl = document.getElementById('calendar');
            const calendar = new FullCalendar.Calendar(calendarEl, {
              aspectRatio:false,
              headerToolbar: {
                left: 'prev,next,title',
                // center: 'title',
                // right: 'customMonthButton,customTodayButton' // 添加自定义的“月份”和“今天”按钮
                right: ',customTodayButton' // 添加自定义的“月份”和“今天”按钮

              },
          
              initialDate: new Date(), // 当前日期
              firstDay: 1, // 设置周一为每周的第一天
              weekends: true,
              navLinks: false, // 可以点击日期导航
              editable: true,
              dayMaxEvents: true,
              views: {
                week: {
                  columnFormat: 'ddd D/M' // "ddd"代表英文的周几缩写，"D"代表日期，"M"代表月份，这样就去掉了“日”字
                },
                dayGridDay: { // 对于日视图
                  columnHeader: false // 如果你想在日视图中也去掉顶部的日期文字，可以设置此选项
                }
              },
              locale: 'zh', // 设置为中文
              initialView: 'dayGridMonth', // 初始化视图为月视图
              customButtons: {
                customMonthButton: { // 自定义月份按钮
                  text: '月份',
                  click: function () {
                    calendar.changeView('dayGridMonth'); // 切换到月视图
                  }
                },
                customTodayButton: { // 自定义今天按钮
                  text: '今天',
                  click: function () {
                    calendar.today(); // 切换到今天的日期
                  }
                }
              },
              dayRender: function (date, cell) {
                if (date.format() === moment().format()) { // 如果是当天
                  cell.css('background-color', '#008c8c'); // 修改背景色
                  cell.css('border-color', '#008c8c'); // 修改边框颜色
                }
              },
              events: [ /* 你的事件数据 */
                ...dataList
              ],
              // eventContent: function (info) {
              //     var eventWrapper = document.createElement('div');
              //     eventWrapper.classList.add('fc-event-custom-wrapper'); // 为事件容器添加类名

              //     var titleElement = document.createElement('div');
              //     titleElement.textContent = info.timeText || info.event.title; // 显示标题
              //     titleElement.classList.add('fc-event-title'); // 为标题添加类名

              //     var descriptionElement = document.createElement('div');
              //     descriptionElement.textContent = info.event.extendedProps.description || ''; // 显示描述
              //     descriptionElement.classList.add('fc-event-description'); // 为描述添加类名

              //     eventWrapper.appendChild(titleElement);
              //     eventWrapper.appendChild(descriptionElement);

              //     return { domNodes: [eventWrapper] };
              // },







              eventContent: function (arg) {
                return {
                  html: `
                        <div style="color:#000">
                            <p style="display: block;word-wrap: break-word;white-space: pre-line;text-align: center;">
                                ${arg.event.title}
                            </p>
                            <p style="display: block;word-wrap: break-word;white-space: pre-line;color:#000;font-weight: 600;text-align: center;">
                                ${arg.event.extendedProps.description}
                            </p>
                        </div>
                        `
                };
              },
              eventDidMount: function (info) {
                console.log(info.event, 'ffffffffffff')
                // 创建一个包含图片的 HTML 字符串
                var imageHtml = `
                                <div class="popover-body">
                                    <p style="margin-bottom: 20px;text-align: center;word-wrap: break-word; white-space: pre-line;width:100%">
                                          ${info.event._def.extendedProps.description}
                                    </p>
                                    <img src="${info.event._def.extendedProps.imageUrl}" alt="" class="img-fluid">
                                </div>
                                `;

                // 初始化 Popover
                $(info.el).popover({
                  title: info.event.title,
                  content: imageHtml,
                  placement: 'top',
                  trigger: 'hover',
                  html: true, // 允许 HTML 内容
                  container: 'body'
                }).on('shown.bs.popover', function () {
                  // 当 Popover 显示时，调整图片大小以适应容器
                  var img = $(this).find('.popover-body img');
                  img.width(img.parent().width());
                });
              },


              // 点击日历格子触发
              eventClick: function (info) {
                window.open(`${baseURL}/T_T.O.P众越财富/channels/138.html?id=${info.event.id}`)
                console.log(info.event, 'infoinfoinfoinfoinfoinfoinfo')
                // alert('您点击了事件: ' + info.event.title);
              }
            });

            calendar.render();


          }, timsValue ? timsValue : 500)

        }
        // 回车查询
        $('#search_input').on('keydown', function (event) {
          console.log('Key down:', event.which);
          // 检查特定键，比如Ctrl + Enter
          if (event.which == 13) {
            event.preventDefault();
            GetActiveList(44, 54, page, perPage, $('#search_input').val())
            console.log(keyValue, 'event');
            // submitForm(); 
          }
        });
        // 点击查询
        $('#search_btn').on('click', function () {
          GetActiveList(44, 54, page, perPage, $('#search_input').val())
          SetDataList(1)
        })
        // 去列表页
        $('#GoList').on('click', function () {
          window.open(`${baseURL}/T_T.O.P%E4%BC%97%E8%B6%8A%E8%B4%A2%E5%AF%8C/channels/137.html`, '_blank')
        })

        $('#goday').on('click', function () {
          window.open(`${baseURL}/T.O.P%E4%BC%97%E8%B6%8A%E8%B4%A2%E5%AF%8C/channels/139.html`, '_blank')
        })



      })



    </script>
    <!-- footer -->
    <stl:include file="/include/footer.html"></stl:include>


</body>

</html>